import React, { useEffect, useState } from "react";
import { Pagination } from 'antd';
import style from "./index.module.less";
import { getAckDataList } from "../../../../api/publishCase";

const Publish = (props: any) => {
  const [queryParams, setQueryParams] = useState({
    pageNo: 1,
    pageSize: 10,
    total: 11,
  });
  useEffect(() => {
    getListData();
  }, [queryParams.pageNo]);
  const [list, setList] = useState([]);
  // 获取列表数据
  const getListData = async () => {
    const res: any = await getAckDataList({
      pageNo: queryParams.pageNo,
      pageSize: queryParams.pageSize,
    });
    setQueryParams({
      ...queryParams,
      total: res.data.total,
    })
    setList(res.data.list);
  }
  // 分页
  const handlePageChange = (page: number) => {
    setQueryParams({
      ...queryParams,
      pageNo: page,
    });
  }

  return <>
    <div className={style.acknowled_body}>
      {list.map((item: any) => {
        return <div className={style.acknowled_item} key={item.thanksId}>
          <div className={style.item_left}>
            <div className="h2 strong orange">{item.createTime.slice(5, 10)}</div>
            <div className="h3 strong black">{item.createTime.slice(0, 4)}</div>
          </div>
          <div className={style.item_right}>
            <div className={style.right_line}>
              <div className={style.label}>期刊名称：</div>
              <div className={style.desic}>{item.journalName}</div>
            </div>
            <div className={style.right_line}>
              <div className={style.label}>影响因子：</div>
              <div className={style.desic}>{item.factors}</div>
            </div>
            <div className={style.right_line}>
              <div className={style.label}>文章题目：</div>
              <div className={style.desic}>{item.airticleName}</div>
            </div>
            <div className={style.right_line}>
              <div className={style.label}>第一作者：</div>
              <div className={style.desic}>{item.author}</div>
            </div>
            <div className={style.right_line}>
              <div className={style.label}>致谢内容：</div>
              <div className={style.desic}>{item.thanksContent}</div>
            </div>
          </div>
        </div>
      })}
      {queryParams.total > 10 && <div className={style.pagination_body}>
        <Pagination defaultCurrent={queryParams.pageNo} total={queryParams.total} onChange={handlePageChange} />
      </div>}
    </div>
  </>
}

export default Publish;